<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表
      </el-button>
      <div class="fiel_body">
        <div class="fiel_left">
          <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="140px">
            <el-form-item label="区角评价维度:" prop="title">
              <el-input v-model="infoForm.title" placeholder="填写区角评价维度"></el-input>
            </el-form-item>
            <el-form-item label="选择关联领域:" prop="domain_ids">
              <div>
                <el-select placeholder="" v-model="first_field" size="small"
                           class="w-140 mr-10">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in list01"
                             :key="index"></el-option>
                </el-select>
                <el-select placeholder="" v-model="second_field" size="small"
                           class="w-140 mr-10" v-if="list01[first_field]">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in list01[first_field].list"
                             :key="index"></el-option>
                </el-select>
                <el-button type="primary" @click="checkTabLine()" class="mb-10" size="small">添加领域</el-button>
              </div>
              <div>
                <el-tag
                    :key="tag"
                    v-for="(tag,index) in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)"
                    class="mr-10"
                >{{tag}}
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item label="描述:" prop="description">
              <el-input v-model="infoForm.description" placeholder="" type="textarea" placeholder="填写区角名称和右侧矩阵图三级分类"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认并保存</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="fiel_right">
          <img src="@/assets/imageAdmin/field.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      infoForm: {
        title: '',
        domain_ids: '',
        description: ''
      },
      // 表单验证
      rules:
          {
            title: [
              {required: true, message: '请输入区角属性名称', trigger: 'blur'}
            ],
            domain_ids: [
              {required: true, message: '所属领域', trigger: 'blur'}
            ],
            description: [
              {required: true, message: '简介', trigger: 'blur'}
            ]
          },
      dynamicTags: [],
      dynamicTagsId: [],
      // 重新构建
      first_field: '',
      second_field: '',
      list01: {}
    }
  },
  computed: {
  },
  mounted () {
  },
  created () {
    this.getLsitFn()
  },
  methods: {
    getDetail () {
      this.$fetch(this.api.corner.attr.edit, {id: this.$route.query.id}).then((response) => {
        if (!response.code) {
          for (let i in response.vo.domain_ids) {
            this.dynamicTagsId.push(response.vo.domain_ids[i].id)
            this.dynamicTags.push(response.vo.domain_ids[i].name)
          }
          this.infoForm.title = response.vo.title
          this.infoForm.domain_ids = this.dynamicTagsId.join(',')
          this.infoForm.description = response.vo.description
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getLsitFn () {
      this.$fetch(this.api.corner.domain.index, {}).then((response) => {
        console.log('数据：', response)
        if (response.code === 0) {
          let list01 = {}
          for (let i in response.list) {
            if (!response.list[i].parent_id) {
              list01[response.list[i].id] = response.list[i]
              list01[response.list[i].id].list = {}
            } else {
              list01[response.list[i].parent_id].list[response.list[i].id] = response.list[i]
            }
          }
          console.log('查看数据：', list01)
          this.list01 = list01
          if (this.$route.query.id) {
            this.getDetail()
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    checkTabLine () {
      if (!this.first_field || !this.second_field) {
        this.$message.error('请选择完整的领域')
        return
      }
      if (this.dynamicTagsId.indexOf(this.second_field) !== -1) {
        this.$message.error('领域已存在')
        return
      }
      this.dynamicTags.push(this.list01[this.first_field].list[this.second_field].name)
      this.dynamicTagsId.push(this.list01[this.first_field].list[this.second_field].id)
      this.infoForm.domain_ids = this.dynamicTagsId.join(',')
    },
    onSubmit () {
      console.log('数据提交', this.infoForm)
      if (!this.infoForm.title) {
        this.$message.error('请填写区角属性名称')
        return false
      }
      if (!this.infoForm.domain_ids) {
        this.$message.error('请选择区角属性领域')
        return false
      }
      if (!this.infoForm.description) {
        this.$message.error('请填写属性描述')
        return false
      }
      let http_ = this.$route.query.id ? this.api.corner.attr.edit : this.api.corner.attr.add
      if (this.$route.query.id) {
        this.infoForm.id = this.$route.query.id
      }
      this.$post(http_, this.infoForm).then((response) => {
        if (response.code === 0) {
          this.$message.success(response.msg)
          if (!this.$route.query.id) {
            this.infoForm.title = ''
            this.infoForm.domain_ids = ''
            this.infoForm.description = ''
            this.dynamicTags = []
            this.dynamicTags = []
            this.first_field = ''
            this.second_field = ''
          }
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleClose (index) {
      this.dynamicTags.splice(index, 1)
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.domain_ids = this.dynamicTagsId.join(',')
    },
    backlist () {
      this.$router.go(-1)
    }
  }
}
</script>
